<!-- 食遍习水-习水名店 -->
<template>
  <div class="horizontal-tab">

    <div class="breadcrumb">
      您当前的位置：
      <span>畅游习国 > </span>&nbsp;
      <span  @click="toPreviousRoute" style="color: #39ADFF; cursor: default">{{titleCon}}&nbsp;></span>&nbsp;
      <span>详情</span>
    </div>

<!-- 左侧菜单 -->
    <div
      class="horizontal-tab-con"
      id="horizonLog">
      <ul
        class="horizontal-ul"
        :style="{marginLeft: marginLeftLong + 'px'}"
        :class="{activeStyle: activeShow}"
        v-if="this.leftTabConNum !== 5 && this.leftTabShow">
        <li class="horizontal-li"
          v-for="item in horizontalTabData[leftTabConNum]"
          :key="item.id"
          :class="{classActive: item.id === numShow || item.id === numShowClick}"
          @click="horizontalTab(item.id)"
          @mouseenter="mouseenterTab(item.id)"
          @mouseleave="mouseleaveTab(item.id)">
          <img :src="guliDose" alt="">
          <span>{{item.value}}</span>
        </li>
      </ul>

<!-- 名菜详情展示 -->
      <div v-if="this.$route.query.type === 1"
        class="horizontal-con"
        :class="{activeFixed: activeShow}"
        id="horizontal-con-offsetLeft">
        <div class="horizontal-span">
          <!-- id 锚点 -->
          <h4 id='horizontalId1'>{{foodDetailData.dishesName}}</h4>
          <div class="horizontal-span-con">
            <p id='horizontalId2'>{{foodDetailData.dishesIntro}}</p>
          </div>
          <img style="margin: 15px 0" v-lazy="foodDetailData.dishesImages" alt="">
          <!-- 人均价格 -->
          <div v-if="foodDetailData.dishesPrice">
            <p id='horizontalId3' class="horizontal-introduction"><i class="icon iconfont icon-jiage"></i>人均价格</p>
            <p style="text-align: left; margin: 15px">{{foodDetailData.dishesPrice}}元/人</p>
          </div>
        </div>
      </div>

<!-- 名店详情展示 -->
      <div v-if="this.recommendDetaliNum === 0"
        class="horizontal-con"
        id="horizontal-con-offsetLeft"
        :class="{activeFixed: activeShow}">
        <div class="horizontal-span">
          <!-- id 锚点 -->
          <h4 id='horizontalId1'>{{storeDetailData.name}}</h4>
          <div class="horizontal-span-con">
            <span class="horizontal-introduction" id='horizontalId2'><i class="icon iconfont icon-dizhi"></i>  地址：{{storeDetailData.address}}</span>
            <p id='horizontalId3'>{{storeDetailData.feature}}</p>
          </div>
          <!-- 营业时间 -->
          <div v-if="storeDetailData.businessStartTime && storeDetailData.businessEndTime">
            <p id='horizontalId4' class="horizontal-introduction"><i class="icon iconfont icon-gongsijianjie"></i>  营业时间</p>
            <p style="text-align: left; margin: 15px">{{storeDetailData.businessStartTime}}-{{storeDetailData.businessEndTime}}</p>
          </div>
          <!-- 人均价格 -->
          <div v-if="storeDetailData.consumptionPerPerson">
            <p id='horizontalId5' class="horizontal-introduction"><i class="icon iconfont icon-jiage"></i> 人均价格</p>
            <p style="text-align: left; margin: 15px">{{storeDetailData.consumptionPerPerson}}元/人</p>
          </div>
          <!-- 联系电话 -->
          <div v-if="storeDetailData.consumptionPerPerson">
            <p id='horizontalId5' class="horizontal-introduction"><i class="icon iconfont icon-dianhua3"></i>  联系电话</p>
            <p style="text-align: left; margin: 15px">{{storeDetailData.receptionPhone}}</p>
          </div>
          <!-- 内容管理系统数据 -->
          <!-- <span v-html="horizontalHtml"></span> -->

        </div>
      </div>

<!-- 购物习水详情展示 -->
      <div v-if="this.$route.query.type === 3"
        class="horizontal-con"
        id="horizontal-con-offsetLeft"
        :class="{activeFixed: activeShow}">
        <div class="shoppingDetailDataHeaderAll">

          <img v-lazy="imgs" alt="">

          <div class="shoppingDetailDataHeaderRight">
            <h4>名称：{{shoppingDetailDataHeader.name}}</h4>
            <p><i class="icon iconfont icon-jiage"></i>  均价：{{shoppingDetailDataHeader.price}}</p>
            <p><i class="icon iconfont icon-gongsijianjie"></i>  详情：{{shoppingDetailDataHeader.intro}}</p>
            <p><i class="icon iconfont icon-dizhi"></i>  地址：{{shoppingDetailDataHeader.storeAddress}}</p>
            <p><i class="icon iconfont icon-dianhua3"></i>  电话：{{shoppingDetailDataHeader.storePhone}}</p>
            <div class="payment" @click="dialogVisible">一键购买</div>

          </div>
        </div>

        <div style="text-align: left;padding:15px;background:rgba(0,0,0,0.04);margin:10px 0 0">{{this.$route.query.title}}-详情</div>

        <div style="width: 100%; overflow: hidden">
          <el-dialog
            title="请扫码填写相关信息并支付"
            width="30%"
            center
            :visible.sync="centerDialogVisible"
            :before-close="handleClose">
            <div id="qrcode" ref="qrcode" style="textAlign: -webkit-center;"></div>
          </el-dialog>
        </div>

        <div class="shoppingDetails" v-html="horizontalHtml"></div>
      </div>

<!-- 景区详情数据获取 -->
      <div v-if="this.$route.query.type === 4 && this.recommendDetaliNum === 1"
        class="horizontal-con"
        id="horizontal-con-offsetLeft"
        :class="{activeFixed: activeShow}">
        <div class="horizontal-span">
          <!-- id 锚点 -->
          <h1 id='horizontalId1'>{{scenicDetailData.name}}</h1>

          <div style="margin: 0 0 10px">
            <div class="tag">
              <el-tag type="danger" v-if="scenicDetailData.level >= 4">
                <label v-for="index in scenicDetailData.level" :key="index">A</label>景区
              </el-tag>&nbsp;
              <!-- <el-tag type="danger" v-if="scenicDetailData.level < 3">其他</el-tag>&nbsp; -->
              <el-tag type="danger">景区评分: {{ scenicDetailData.rate}}分</el-tag>
            </div>
          </div>

          <div class="horizontal-span-con">
            <span class="horizontal-introduction" id='horizontalId2'><i class="icon iconfont icon-dizhi"></i>  地址：{{scenicDetailData.address}}</span>
            <!-- <p id='horizontalId3'>{{scenicDetailData.introduction}}</p> -->
          </div>
          <span id='horizontalId3' class="scenic-html" v-html="horizontalHtml"></span>

          <!-- 推荐景区 -->
          <div>
            <div class="title" :id="'horizontalId4'">
              <img :src="require('_as/guli-desc-title-1.png')" alt="">
              <span>推荐景区</span>
              <hr style="height:2px; border:none; border-top:1px solid #555555">
            </div>

          <!-- 景区 -->
            <div class="sightseeing-tour-history">
              <div class="sightseeing-con">
                <alone-img-zoom :aloneWidth="520" :aloneHeight="490" :imgZoomData="imgZoomDataSight0" @clickSight="clickSight"></alone-img-zoom>
                <div class="sightseeing-con-right">
                  <alone-img-zoom :aloneWidth="255" :aloneHeight="240" :imgZoomData="imgZoomDataSight1" @clickSight="clickSight"></alone-img-zoom>
                  <alone-img-zoom :aloneWidth="255" :aloneHeight="240" :imgZoomData="imgZoomDataSight2" @clickSight="clickSight"></alone-img-zoom>
                  <alone-img-zoom :aloneWidth="255" :aloneHeight="240" :imgZoomData="imgZoomDataSight3" @clickSight="clickSight"></alone-img-zoom>
                  <alone-img-zoom :aloneWidth="255" :aloneHeight="240" :imgZoomData="imgZoomDataSight4" @clickSight="clickSight"></alone-img-zoom>
                </div>
              </div>
            </div>

          </div>

          <!-- 推荐酒店 -->
          <div>
            <div class="title" :id="'horizontalId5'">
              <img :src="require('_as/guli-desc-title-4.png')" alt="">
              <span>推荐酒店</span>
              <hr style="height:2px; border:none; border-top:1px solid #555555">
            </div>

          <!-- 酒店 -->
            <div class="sightseeing-tour-history">
              <keep-alive>
                <information-img-zoom
                  :imgHeight="180"
                  :imgWidth="220"
                  :imgMarginTop="0"
                  :imgMarginBottom="-15"
                  :informationHeight="240"
                  :informationConHeight="96"
                  :btnBottom="9"
                  :btnLeft="36"
                  :btnShow="false"
                  :informationData="informationLiveData"
                  @clickinformation="clickinformationHotel">
                </information-img-zoom>
              </keep-alive>
            </div>

          </div>

          <!-- 推荐名店 -->
          <div>
            <div class="title" :id="'horizontalId6'">
              <img :src="require('_as/guli-desc-title-2.png')" alt="">
              <span>推荐名店</span>
              <hr style="height:2px; border:none; border-top:1px solid #555555">
            </div>
            <!-- 名店 -->
            <div class="sightseeing-tour-history">
              <keep-alive>
                <information-img-zoom
                  :imgHeight="200"
                  :imgWidth="220"
                  :imgMarginTop="0"
                  :imgMarginBottom="-64"
                  :informationHeight="350"
                  :informationData="informationFoodData"
                  :btnMoreImgBg="serviceMoreBg"
                  @clickinformation="clickinformationFood">
                </information-img-zoom>
              </keep-alive>
            </div>
          </div>

          <!-- 手绘地图 -->
          <div>
            <div class="title" :id="'horizontalId7'">
              <img :src="require('_as/guli-desc-title-5.png')" alt="">
              <span>手绘地图</span>
              <hr style="height:2px; border:none; border-top:1px solid #555555">
            </div>

            <!-- 手绘地图 -->
            <div class="iframe" v-if="scenicMap !== undefined">
              <iframe :src="scenicMap" frameborder="0" width="100%" height="500px"></iframe>
            </div>
            <div v-else-if="scenicMap === undefined" style="color: #ddd; padding:15px 0">暂无数据~</div>
          </div>

        </div>
      </div>

<!-- 娱享详情 -->
      <div v-if="this.$route.query.type === 5"
        class="horizontal-con"
        id="horizontal-con-offsetLeft"
        :class="{activeFixed: activeShow}">
        <div class="horizontal-span">
          <!-- id 锚点 -->
          <h4 id='horizontalId1'>{{amusementDetailData.title}}</h4>

          <div class="horizontal-span-con">
            <span class="horizontal-introduction" id='horizontalId2'><i class="icon iconfont icon-dizhi"></i>  地址：{{amusementDetailData.address}}</span>
          </div>

          <div v-if="amusementDetailData.phone">
            <span id='horizontalId3' class="horizontal-introduction"><i class="icon iconfont icon-dianhua3"></i>  联系电话: {{amusementDetailData.phone}}</span>
          </div>
          <div id='horizontalId4' class="horizontal-html-con">
            <span v-html="horizontalHtml"></span>
          </div>
        </div>
      </div>

<!-- 游记攻略详情 -->
      <div v-if="this.$route.query.type === 6"
        class="horizontal-con"
        :class="{activeFixed: activeShow}"
        id="horizontal-con-offsetLeft">
        <div class="horizontal-span">
          <!-- id 锚点 -->
          <h4 id='horizontalId1'>{{playStrategyDetailData.title}}</h4>
          <div class="horizontal-span-con">
            <p id='horizontalId2'>{{playStrategyDetailData.intro}}</p>
          </div>
          <img style="margin: 15px 0;width: 100%" v-lazy="playStrategyDetailData.firstImg" alt="">

          <div v-for="item in articleContentCon" :key="item.id">

            <h3 style="textAlign: left; textIndent: 30px;lineHeight: 1.5; width: 100%; margin: 15px 0" id='horizontalId1' v-if="item.type === 2">{{item.content}}</h3>
            <p style="textAlign: left; textIndent: 30px;lineHeight: 1.5" id='horizontalId2' v-if="item.type === 3">{{item.content}}</p>
            <img style="margin: 10px 0; width: 100%" v-lazy="item.content" alt="" v-if="item.type === 4">

          </div>

        </div>
      </div>

<!-- 交通习水详情 -->
      <div  v-if="this.$route.query.type === 7"
        class="horizontal-con">
        <!-- 客运,汽车,飞机 -->
        <div class="horizontal-span">
          <h4>{{this.$route.query.title}}</h4>
          <div class="horizontal-span-con">
            <span class="horizontal-introduction"><b><i class="icon iconfont icon-gongsijianjie"></i>  温馨提示：</b>{{this.$route.query.intro}}</span>
          </div>
          <div class="horizontal-html-con">
            <span v-html="horizontalHtml"></span>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import guliDose from '_as/guli-desc.png'
import horizontalTabData from './horizontalTabData.json'

import BirthlandTop from '_c/birthlandTop/birthland_top'
import AloneImgZoom from '_c/aloneImgZoom/alone_img_zoom'
import InformationImgZoom from '_c/informationImgZoom/information_img_zoom'

import changyou1 from '_as/changyou-2-1.png'
import changyou2 from '_as/changyou-2-2.png'
import changyou3 from '_as/changyou-2-3.png'

import serviceMoreBg from '_as/service-more.png'

// 引入qrcodejs2插件
import QRCode from 'qrcodejs2'

import scrollAnimation from '@/api/scrollAnimation.js'

export default {
  name: 'Consultation_WeChatNews',
  data () {
    return {
      guliDose,
      bgStyle: false,
      numShow: '1',
      numShowClick: '1',
      activeShow: false,
      scrollLog: '',
      storeDetailData: {},
      foodDetailData: {},
      shoppingDetailDataHeader: {},
      imgs: '',
      scenicDetailData: {},
      amusementDetailData: {},
      playStrategyDetailData: {},
      articleContentCon: [],
      marginLeftLong: 0,
      horizontalTabData,
      leftTabConNum: null,
      leftTabShow: true,
      horizontalHtml: '',
      serviceMoreBg,
      changyou1,
      changyou2,
      changyou3,
      imgZoomDataSight0: {},
      imgZoomDataSight1: {},
      imgZoomDataSight2: {},
      imgZoomDataSight3: {},
      imgZoomDataSight4: {},
      informationLiveData: [],
      informationFoodData: [],
      scenicMap: '',
      recommendDetaliNum: null,
      titleCon: '',
      centerDialogVisible: false,
      QRcodeData: ''
    }
  },
  components: {
    BirthlandTop,
    AloneImgZoom,
    InformationImgZoom
  },
  computed: {},
  beforeCreate () {},
  created () {
    this.titleCon = this.$route.query.title
    window.addEventListener('scroll', this.menu)
    this.$nextTick(() => {
      this.getDataInit()
    })
  },
  mounted () {},
  methods: {
    horizontalTab (index) {
      this.numShowClick = index
      const horizontalIdItem = 'horizontalId' + index
      const horizontalAllCon = document.getElementById(horizontalIdItem).offsetTop - 70
      const needScrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset || 0
      scrollAnimation(needScrollTop, horizontalAllCon)
    },
    mouseenterTab (index) {
      this.numShow = index
    },
    mouseleaveTab () {
      this.numShow = this.numShowClick
    },
    menu () {
      this.scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || window.scrollY
      let horizonLog = document.getElementById('horizonLog').offsetTop - 84
      if (this.scroll >= horizonLog) {
        if (this.leftTabConNum !== 5 && this.leftTabShow) {
          this.activeShow = true
        }
        this.offsetLeftLog()
      } else {
        this.activeShow = false
        this.marginLeftLong = 0
      }
    },
    offsetLeftLog () {
      const offsetLeftLong = document.getElementById('horizontal-con-offsetLeft').offsetLeft - 220
      this.marginLeftLong = offsetLeftLong
    },
    // ---------------------------------------------------------------------------------------------------
    getDataInit () {
      switch (this.$route.query.type) {
        case 1: // 名菜
          this.getEatfoodDetailData()
          this.leftTabConNum = 0
          break
        case 2: // 名店
          this.getEatStoreDetailData(this.$route.query.id)
          this.leftTabConNum = 1
          break
        case 3: // 购物习水
          this.getShoppingDetailData()
          this._getHorizontalHtml(this.$route.query.contentId)
          this.leftTabShow = false
          break
        case 4: // 游遍习水
          this.getScenicDetailData(this.$route.query.id)
          this._getHorizontalHtml(this.$route.query.contentId)
          this.leftTabConNum = 3
          break
        case 5: // 娱享习水
          this.getAmusementDetailData()
          this._getHorizontalHtml(this.$route.query.contentId)
          this.leftTabConNum = 4
          break
        case 6: // 旅游路线
          this.getplayStrategyDetailData()
          this._getHorizontalHtml(this.$route.query.contentId)
          this.leftTabConNum = 5
          break
        case 7: // 交通习水
          this._getHorizontalHtml(this.$route.query.contentId)
          this.leftTabConNum = 5
          break
        default:
          break
      }
    },
    // 获取“名菜”详情数据
    getEatfoodDetailData () {
      this.$http.get(`/v2/food?id=${this.$route.query.id}`).then(res => {
        this.foodDetailData = res.data[0]
      })
    },
    // 获取“名店”详情数据
    getEatStoreDetailData (id) {
      this.$http.get(`/v2/storeFood?id=${id}`).then(res => {
        this.recommendDetaliNum = 0
        this.storeDetailData = res.data[0]
        this.horizontalTab('1')
        this.numShowClick = '1'
        this.numShow = '1'
      })
    },
    // 获取“购物”详情数据
    getShoppingDetailData () {
      this.$http.get(`/v1/featureProduct?id=${this.$route.query.id}`).then(res => {
        const empt = []
        res.data.forEach(item => {
          empt.push({
            'id': item.id,
            'name': item.name,
            'storeAddress': item.storeAddress,
            'intro': item.intro,
            'atlas': item.atlas.split(';'),
            'price': item.price,
            'storePhone': item.storePhone
          })
        })
        this.shoppingDetailDataHeader = empt[0]
        this.imgs = empt[0].atlas[0]
        if (res.data[0].erCodeStr !== undefined) {
          this.QRcodeData = res.data[0].erCodeStr
        }
      })
    },
    // 获取“景区”详情数据
    getScenicDetailData (id) {
      this.scenicDetailData = {}
      this.$http.get(`/v1/scenic?id=${id}`).then(res => {
        this.scenicMap = ''
        const empt = []
        res.data.forEach(item => {
          empt.push({
            'id': item.id,
            'name': item.name,
            'address': item.address,
            'atlas': item.atlas.split(';'),
            'introduction': item.introduction,
            'level': item.level,
            'rate': item.rate
          })
        })
        this.recommendDetaliNum = 1
        this.scenicDetailData = empt[0]
        this.scenicMap = res.data[0].mapNavigation
        this.getFoodData(res.data[0].longitude, res.data[0].latitude)
        this.getSecnicData(res.data[0].longitude, res.data[0].latitude)
        this.getHotelData(res.data[0].longitude, res.data[0].latitude)
      })
    },
    // 获取“娱享”详情数据
    getAmusementDetailData () {
      this.$http.get(`/v2/amusementList?id=${this.$route.query.id}`).then(res => {
        this.amusementDetailData = res.data[0]
      })
    },
    // 获取“游记攻略”详情数据
    getplayStrategyDetailData () {
      this.$http.get(`v1/playStrategy?id=${this.$route.query.id}`).then(res => {
        this.playStrategyDetailData = res[0]
        this.articleContentCon = JSON.parse(res[0].articleContent)
      })
    },
    // 点击面包屑，路由回滚上级路由
    toPreviousRoute () {
      if (this.$route.query.type === 4) {
        this.$router.push('/sightseeing_tour_secondary/2-4')
      } else {
        this.$router.go(-1)
      }
    },
    // 获取内容管理系统中数据
    _getHorizontalHtml (contentId) {
      this.$http.get(`/v1/contentDesc/${contentId}`).then(res => {
        this.horizontalHtml = res.contentHtml
      })
    },
    // --------------------------------------------------------------------------------------------------------
    clickBirthland (item) {
      switch (item.id) {
        case 0:
          this.$router.push('/sightseeing_tour_secondary/2-3')
          break
        case 1:
          this.$router.push('/sightseeing_tour_secondary/2-5')
          break
        case 2:
          this.$router.push('/sightseeing_tour_secondary/2-6')
          break
        default:
          break
      }
    },
    toEatMore () {
      this.$router.push('/sightseeing_tour_secondary/2-1')
    },
    toSightseeingMore () {
      this.$router.push('/sightseeing_tour_secondary/2-4')
    },
    toHistoryMore () {
      this.$router.push('/sightseeing_tour_secondary/2-2')
    },
    // -----------------------------------------------------------------------------------------
    clickinformationFood (item) {
      this.recommendDetaliNum = 0
      this.titleCon = item.title
      this.leftTabConNum = 1
      this.getEatStoreDetailData(item.id)
    },
    clickinformationHotel (item) {
      // alert('酒店~')
      this.$router.push({
        path: `/hotelDetail/${item.id}/${item.title}`
      })
    },
    clickSight (item) {
      this.titleCon = item.title
      this.horizontalTab('1')
      this.numShowClick = '1'
      this.numShow = '1'
      this.recommendDetaliNum = 1

      this.scenicDetailData = {}
      this.horizontalHtml = ''
      this._getHorizontalHtml(item.contentId)

      this.getScenicDetailData(item.id)

      this.getHotelData(item.longitude, item.latitude)
      this.getSecnicData(item.longitude, item.latitude)
      this.getFoodData(item.longitude, item.latitude)
    },
    // 推荐附近酒店-------------------------------------------------------------------
    getHotelData (longitude, latitude) {
      this.$http.get('/v1/nearbyHotel', {
        longitude: longitude,
        latitude: latitude,
        hotelNum: 4,
        distance: 100000
      }).then(res => {
        this.informationLiveData = []
        const empt = []
        res.forEach(item => {
          empt.push({
            'id': item.id,
            'title': item.name,
            'informationImgZoom': item.thumbnailId,
            'informationBgImg': '',
            'longitude': item.longitude,
            'latitude': item.latitude,
            'content': item.description
          })
        })
        this.informationLiveData = empt
      })
    },
    // 推荐附近景区----------------------------------------------------------------------
    getSecnicData (longitude, latitude) {
      this.$http.get('/v1/nearbyScenic', {
        longitude: longitude,
        latitude: latitude,
        scenicNum: 5,
        distance: 100000
      }).then(res => {
        this.imgZoomDataSight0 = {}
        this.imgZoomDataSight1 = {}
        this.imgZoomDataSight2 = {}
        this.imgZoomDataSight3 = {}
        this.imgZoomDataSight4 = {}
        const empt = []
        res.forEach(item => {
          empt.push({
            'id': item.id,
            'title': item.name,
            'imgZoomItem': item.thumbUrl,
            'contentId': item.contentId,
            'longitude': item.longitude,
            'latitude': item.latitude
          })
        })
        this.imgZoomDataSight0 = empt[0]
        this.imgZoomDataSight1 = empt[1]
        this.imgZoomDataSight2 = empt[2]
        this.imgZoomDataSight3 = empt[3]
        this.imgZoomDataSight4 = empt[4]
      })
    },
    // 推荐附近名店-----------------------------------------------------------------------
    getFoodData (longitude, latitude) {
      this.$http.get('/v1/nearbyStoreFood', {
        longitude: longitude,
        latitude: latitude,
        storeNum: 4,
        distance: 100000
      }).then(res => {
        this.informationFoodData = []
        const empt = []
        res.forEach(item => {
          empt.push({
            'id': item.id,
            'informationImgZoom': item.storeUrl,
            'title': item.name,
            'content': item.feature,
            'informationBgImg': '',
            'longitude': item.longitude,
            'latitude': item.latitude
          })
        })
        this.informationFoodData = empt
      })
    },
    // 获取二维码
    qrcode (QRcodeItem) {
      /* eslint-disable */
      let qrcodeData = new QRCode('qrcode',{
        width: 200, // 设置宽度，单位像素
        height: 200, // 设置高度，单位像素
        text: QRcodeItem // 设置二维码内容或跳转地址
      })
      /* eslint-enable */
    },
    dialogVisible () {
      this.centerDialogVisible = true
      setTimeout(() => {
        this.qrcode(this.QRcodeData)
      }, 80)
    },
    handleClose (done) {
      document.getElementById('qrcode').innerHTML = ''
      this.centerDialogVisible = false
    }
  }
}

</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
.breadcrumb {
  padding 20px 0 20px 15%
  display flex
  align-items center
  margin-bottom 20px
  box-shadow 0 0 10px 2px #ddd
}

.horizontal-tab-con {
  display flex
  justify-content center
  .horizontal-ul {
    width 220px
    // background #F6F0EB
    display inline-block
    .horizontal-li {
      width 200px
      height 60px
      display flex
      justify-content flex-start
      align-items center
      // background #F6F0EB
      margin-bottom 2px
      padding-left 20px
      border-bottom 2px solid #fff
      cursor default
      img {
        width 26px
        height 26px
        padding-right 10px
      }
    }
  }
  .horizontal-con {
    width 1000px
    border-top 1px solid #ddd
    padding 15px
    display flex
    flex-direction column
    .title {
      display flex
      align-items center
      width 300px
      padding 15px 0
      img {
        height 35px
        width 12px
        margin 0 5px 0 0
      }
      span {
        font-size 28px
        color #25a8e5
      }
    }
    .horizontal-span {
      text-align center
      line-height 1.5
      h4 {
        font-size 22px
        padding 10px
      }
      .horizontal-span-con {
        text-align left
        p {
          line-height 2
          padding 20px 10px 10px
          text-indent 30px
        }
      }
    }
    .shoppingDetailDataHeaderAll {
      display flex
      img {
        width 400px
        height 360px
      }
      .shoppingDetailDataHeaderRight {
        text-align left
        line-height 2
        margin 20px 0 0 30px
        width 615px
        .payment {
          background red
          color #fff
          border-radius 5px
          width 150px
          height 40px
          line-height 40px
          text-align center
          cursor default
          margin-top 20px
        }
        p {
          margin 5px 0
          padding-left 10px
        }
      }
    }
  }
}

.horizontal-introduction {
  text-align left
  background rgba(0,0,0,0.03)
  padding 10px
  display inline-block
  width 100%
  line-height 2
}

.classActive {
  background #F7E3D3 !important
}

.activeStyle {
  position fixed
  top 84px
  left 0
}

.activeFixed {
  margin-left 220px
}

.title {
  display flex
  align-items center
  width 300px
  padding 15px 0
  img {
    height 35px
    width 12px
    margin 0 5px 0 0
  }
  span {
    font-size 28px
    color #25a8e5
  }
}

.sightseeing-tour-history {
  width 100%
  position relative
  margin-top 20px
  img {
    margin 30px 0 20px
  }
  .sightseeing-con {
    min-height 490px
    display flex
    justify-content center
    padding-bottom 80px
    // align-items center
    .sightseeing-con-right {
      width 620px
      height 500px
      display flex
      flex-wrap wrap
    }
  }
  .btn {
    position absolute
    left 43%
    bottom 105px
    margin 0px auto
    &:hover {
      span {
        color #000
        border 1px solid #ddd
        box-shadow 0 0 30px 4px #ddd
      }
    }
    span {
      position absolute
      top 51px
      left 46px
      color #999
      width 100px
      padding 5px 10px
      cursor default
      border 1px solid #ddd
      border-radius 20px
    }
  }
  .historyBtn {
    position absolute
    left 43%
    bottom 0px
    margin 0px auto 15px
    &:hover {
      span {
        color #000
        border 1px solid #ddd
        box-shadow 0 0 30px 4px #ddd
      }
    }
    span {
      position absolute
      top 0px
      left 46px
      color #999
      width 100px
      padding 5px 10px
      cursor default
      border 1px solid #ddd
      border-radius 20px
    }
  }
}
</style>

<style lang='stylus' rel='stylesheet/stylus'>
.shoppingDetails {
  p {
    width 100%
    img {
      width 100%
    }
  }
}

.horizontal-tab {
  .icon {
    color #14E1FF
  }
}

// 内容管理系统样式
.horizontal-tab {
  text-align left
  line-height 2
  span {
    p {
      line-height 2 !important
      font-family '仿宋'
      font-size 16px !important
      span {
        font-size 16px !important
        text-align left !important
        line-height 2 !important
      }
      img {
        width 100% !important
      }
    }
  }
}

// 景区内容管理系统
.horizontal-tab {
  p {
    text-align left
    img {
      width 100%
      margin 5px 0
    }
  }
}
</style>
